<template>
  <div class="success-case-form-container">
    <h2 class="page-title">{{ isEdit ? '编辑案例' : '创建案例' }}</h2>
    
    <el-card shadow="never">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="男方昵称" prop="maleUserNickname">
              <el-input v-model="form.maleUserNickname" placeholder="请输入男方昵称（脱敏）" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="女方昵称" prop="femaleUserNickname">
              <el-input v-model="form.femaleUserNickname" placeholder="请输入女方昵称（脱敏）" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="案例引言" prop="quote">
          <el-input v-model="form.quote" placeholder="请输入案例引言/金句" />
        </el-form-item>
        
        <el-form-item label="案例故事" prop="story">
          <el-input v-model="form.story" type="textarea" :rows="8" placeholder="请输入案例故事" />
        </el-form-item>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="结婚日期" prop="marriageDate">
              <el-date-picker v-model="form.marriageDate" type="date" placeholder="选择结婚日期" value-format="YYYY-MM-DD" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="红娘姓名" prop="matchmakerName">
              <el-input v-model="form.matchmakerName" placeholder="请输入红娘姓名" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="状态" prop="caseStatus">
          <el-radio-group v-model="form.caseStatus">
            <el-radio :label="1">展示中</el-radio>
            <el-radio :label="0">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" :loading="submitLoading" @click="handleSubmit">
            {{ isEdit ? '保存修改' : '创建案例' }}
          </el-button>
          <el-button @click="$router.back()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { API_ENDPOINTS } from '@/config/api'

const route = useRoute()
const router = useRouter()
const isEdit = ref(false)
const submitLoading = ref(false)
const formRef = ref(null)

const form = reactive({
  caseId: null,
  maleUserNickname: '',
  femaleUserNickname: '',
  quote: '',
  story: '',
  marriageDate: null,
  matchmakerName: '',
  caseStatus: 1
})

const rules = {
  maleUserNickname: [{ required: true, message: '请输入男方昵称', trigger: 'blur' }],
  femaleUserNickname: [{ required: true, message: '请输入女方昵称', trigger: 'blur' }],
  quote: [{ required: true, message: '请输入案例引言', trigger: 'blur' }],
  story: [{ required: true, message: '请输入案例故事', trigger: 'blur' }]
}

const loadDetail = async (id) => {
  try {
    const response = await request.get(`${API_ENDPOINTS.CASE_DETAIL}/${id}`)
    if (response.code === 200) Object.assign(form, response.data)
  } catch (error) {
    console.error('加载详情失败:', error)
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    submitLoading.value = true
    
    const url = isEdit.value ? `${API_ENDPOINTS.CASE_UPDATE}/${form.caseId}` : API_ENDPOINTS.CASE_CREATE
    const method = isEdit.value ? 'put' : 'post'
    
    const response = await request[method](url, form)
    if (response.code === 200) {
      ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
      router.push('/success-case/list')
    }
  } catch (error) {
    console.error('提交失败:', error)
  } finally {
    submitLoading.value = false
  }
}

onMounted(() => {
  if (route.params.id) {
    isEdit.value = true
    loadDetail(route.params.id)
  }
})
</script>

<style scoped>
.success-case-form-container { padding: 0; }
.page-title { font-size: 24px; font-weight: bold; color: #333; margin: 0 0 20px 0; }
</style>

